<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>6.VueComponent</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo"></div>

    <script type="text/javascript">

      // 创建一个Person组件
      let Person = Vue.extend({
        name:'Person',
        template:`
          <div>
            <h2>人员信息</h2>  
            <h4>名字：{{pname}}</h4>
            <button @click="showPerson">展示人员信息</button>  
          </div>
        `,
        data(){
          return {
            pname:'强哥'
          }
        },
        methods:{
          showPerson(){
            console.log(this)
            alert(`我叫${this.pname}`)
          }
        }
      })

      // let School = Vue.extend()

      // console.log(Person) // 函数
      // console.log(School) // 函数

      // 创建vm
      let vm = new Vue({
        el:'#demo',
        components:{Person},
        template:`
          <div>
             <Person/>
             <Person/>
             <Person/>
          </div>
        `
      })
      
    </script>
  </body>
</html>